<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <title>Custom Events &raquo; Key Bindings</title>
  <style type="text/css">
  body {
    padding: 0;
    margin: 0;
    background-color: #4f4e45;
    font-family: Tahoma, Arial, sans-serif;
  }
  
  #main {
    margin: 20px auto;  
    height: 181px;
    width: 610px;
  }
  
  #main h2 {
    font-weight: normal;
    margin: 0;
    color: #ff9600;
    font-size: 14pt;
    font-family: Tahoma, Arial, sans-serif;
    padding-bottom: 1em;
  }
  
  #leftchoices {
    padding: 0;
    margin: 0;
    float: left;
    font-size: 12pt;
    list-style-type: none;
    width: 180px;
  }
  
  #leftchoices li {
    padding: 5px;
  }

  #leftchoices li:hover {
    background-color: #999;
    color: #111;
    cursor: pointer;
  }

  #leftchoices li.selected {
    background-color: #333;
    color: #999;
  }
  
  #rightcontent {
    float: right;
    width: 385px;
    padding: 5px 20px;
    color: #999;
  }

  </style>
</head>
<body>

<div id="main">
    <h2>Testing custom events and interception: Now with key bindings!</h2>
    
    <ul id="leftchoices">
        <li id="shakespeare">William Shakespeare</li>
        <li id="fry">Stephen Fry</li>
        <li id="wright">Stephen Wright</li>
        <li id="gandhi">Mahatma Gandhi</li>
        <li id="mlk">Martin Luther King</li>
    </ul>
    <div id="rightcontent">
        &laquo; Choose an option from the menus to my left
    </div>
</div>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.2/prototype.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.1/scriptaculous.js"></script>
<script type="text/javascript" src="scripts/keys.js"></script>
<script type="text/javascript" src="scripts/keybindings.js"></script>

<script type="text/javascript">
var quotes = {
    'shakespeare': "All the world's a stage, And all the men and women merely players; They have their exits and their entrances, And one man in his time plays many parts, His acts being seven ages.",
    'fry': "An original idea. That can't be too hard. The library must be full of them.",
    'wright': "I almost had a psychic girlfriend but she left me before we met.",
    'gandhi': "An eye for an eye, and soon the whole world is blind",
    'mlk': "A nation that continues year after year to spend more money on military defense than on programs of social uplift is approaching spiritual doom."
}

document.observe("dom:loaded", function() {        
    $$('ul#leftchoices li').each(function(el) {
        el.observe('click', function(e) {
            el.fire('selected:choice');            
        });
    });
});

/*
 * Tie to the keybinding and events
 */
document.observe('action:move-up', function(e) {
    Selection.moveUp();
});

document.observe('action:move-down', function(e) {
    Selection.moveDown();
});

KeyBindings.add({
   eventname: 'action:move-up',
   // keys: kb.caseInsensitive('p'),
   keys: ['p', Key.ARROW_UP ],
   description: "Move up the stack"
});

KeyBindings.add({
   eventname: 'action:move-down',
   keys: ['n', Key.ARROW_DOWN ],
   description: "Move down the stack"
});

/*
 * Selecting the left hand side options
 */
var Selection = (function() {
    var item;
    
    return {
        select: function(el) {
            el.className = 'selected';
            if (item) item.className = '';
            item = el;
            $('rightcontent').innerHTML = quotes[el.id];
        },
        
        moveUp: function() {
            var above = item.previous('li');
            if (above) {
                this.select(above);
            } // else don't move
        },
        
        moveDown: function() {
            var selection;
            if (!item) {
                selection = $$('ul#leftchoices li')[0]; // get the first one if not selected yet
            } else {
                selection = item.next('li');
            }
            if (selection) this.select(selection);
        }
    }
})();

document.observe('selected:choice', function(e) {
    Selection.select(e.target);
});

</script>
</body>
</html>